{% load i18n %}

<div class="text-right mb-4">
  {% if project.farm %}
    <a href="{% url 'farm-detail' project.farm.id %}" class="btn btn-default btn-sm">
      {% trans "Farm Detail" %}
    </a>
  {% else %}
    <a href="{% url 'farm-new' project.id %}" class="btn btn-primary btn-sm">
      {% trans "Register Farm" %}
    </a>
  {% endif %}
  {% include "promgen/project_detail_hosts_action_button_group.html" %}
</div>
<div class="panel panel-default">
  <div v-pre class="panel-heading">
    <p class="panel-title">Hosts from {{ project.farm.name }} ({{ project.farm.source }})</p>
  </div>
  <table class="table table-bordered table-condensed">
    <tr>
      <th>Select</th>
      <th>Name</th>
      <th>Actions</th>
    </tr>
  {% for host in project.farm.host_set.all %}
    <tr>
      <td class="col-xs-1"><input type="checkbox" value="{{ host.name }}:[0-9]*" v-model="selectedHosts"></td>
      <td class="col-xs-5" v-pre><a href="{% url 'host-detail' host.name %}">{{ host.name }}</a></td>
      <td class="col-xs-2">
        <a
          @click="setSilenceDataset"
          class="btn btn-warning btn-xs"
          data-instance="{{host.name}}:[0-9]*"
          data-project="{{project.name}}"
          data-service="{{project.service.name}}"
          style="display: inline-block;"
        >{% trans "Silence" %}</a>
      </td>
    </tr>
  {% endfor %}
  </table>

  <div class="panel-footer" v-if="selectedHosts.length">
    <a
      @click="silenceSelectedHosts"
      class="btn btn-warning btn-sm"
      data-project="{{project.name}}"
      data-service="{{project.service.name}}"
      style="display: inline-block;"
    >{% trans "Silence selected hosts" %}</a>
  </div>
</div>
